<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="app">
        <p>{{count}}</p>
        <button @click="count++">点击</button>
        <hr>
        <aaa :a="1" :b="2">
            <template v-slot:one>
                <p>{{count}}</p>
            </template>
            <template v-slot:default>
                <p>{{count*2}}</p>
            </template>
            <!-- <template v-slot:two="slotData">
                <li v-for="(item,index) in slotData.list" :key="index">
                    <span>{{item.name}}</span>
                    <span>{{item.class}}</span>
                    <span>{{item.ch}}</span>
                    <span>{{item.mh}}</span>
                    <span>{{item.eh}}</span>
                </li>
            </template> -->
            <template v-slot:two="{list,a,b}">
                <li v-for="(item,index) in list" :key="index">
                    <span>{{item.name}}</span>
                    <span>{{item.class}}</span>
                    <span>{{item.ch}}</span>
                    <span>{{item.mh}}</span>
                    <span>{{item.eh}}</span>
                </li>
            </template>
        </aaa>
        <!--  aaa  -> props:["count"]
            <div>
                <bbb :count="count"></bbb>
            </div>
         -->
        <!-- bbb -> props:["count"]
            <div>
                <ccc :count="count"></ccc>
            </div>
          -->
        <!-- ccc -> props:["count"]
            <div>
                {{count}}
            </div>
            -->
        <hr>
        <!-- <component is="aaa" x="10" y="20"></component> -->
        <form is="aaa"></form>

    </div>
</body>
<template id="aaa">
    <div>
        <p>
            <slot name="one"></slot>
        </p>
        <p>
            <slot name="default"></slot>
        </p>
        <ul>
            <!-- {list,a,b} -->
            <slot name="two" :list="list" :a="1" :b="2">
                <li v-for="item,index in list" :key="item.index">
                    <p>{{item.name}}</p>
                    <p>{{item.class}}</p>
                    <p>{{item.ch}}</p>
                    <p>{{item.mh}}</p>
                    <p>{{item.eh}}</p>
                </li>
            </slot>
        </ul>
        <p>{{count}}</p>
        <p>{{getCount()}}</p>
        <p><button @click="setCount(getCount()+1)">点击</button></p>
    </div>
</template>
<script>
    var aaa = {
        data() {
            return {
                count: 10,
                list: [
                    { name: "张三", class: "2217", ch: 55, mh: 66, eh: 77 },
                    { name: "李四", class: "2217", ch: 78, mh: 89, eh: 91 },
                    { name: "王五", class: "2217", ch: 56, mh: 67, eh: 99 },
                ]
            }
        },
        template: `#aaa`,
        inject: ["count", "getCount", "setCount"],  // this.count = count
        // inject: {
        //     // count: {
        //     //     // from: "count",   // this.count = count
        //     //     default: 100,
        //     // }
        //     num: {
        //         from: "count",   // this.num = count
        //         default: 100,
        //     }
        // }
    }


    var vm = new Vue({
        el: "#app",
        data: {
            count: 1,

        },
        components: {
            aaa: aaa,
        },
        // provide: {
        //     count: 1
        // }
        provide: function () {
            return {
                count: this.count,
                getCount: () => this.count, //函数引用类型
                setCount: (v) => this.count = v,
            }
        }
    })

    // vm.$mount()




</script>

</html>